<template>
    <fieldset>
        <legend>pinia使用</legend>
        <h1>{{ msg }}</h1>
        <h1>{{ reverseMsg('卢老爷') }}</h1>
        <button @click="handleChange">修改pinia状态</button>
        <h1>组合式Store:{{ name }}</h1>
        <h1>组合式Store的getters:{{ reverseName }}</h1>
        <button @click="compositionStore.changeName">点击变更组合式的store状态</button>
    </fieldset>
</template>
<script setup>

import {storeToRefs} from "pinia"

//storeToRefs能够让解构之后的状态保持响应性
//使用pinia store
import useMainStore from "../store/main.js"

import useCompositionStore from "../store/composition.js"

let mainStore = useMainStore();

// console.log(mainStore)

//读取store中的状态

console.log(mainStore)

let {msg, reverseMsg} = storeToRefs(mainStore)

//修改store中的状态

let handleChange = () => {
    mainStore.msg = '挖呀挖';

    //actions的方法 直接用访问属性的方式访问就行
    mainStore.getProduct('666')
}

//订阅状态的变化

mainStore.$subscribe((mutation, state) => {
    console.log(mutation)
    console.log(state)
})


//使用组合式定义的store

let compositionStore = useCompositionStore()

console.log(compositionStore)

let {name, reverseName} = storeToRefs(compositionStore)
</script>